<template>
    <div :style="carStyle">
        <div v-if="obj.groupline" style="text-align:center;">
            <div>{{ dateTime }}</div>
            <div v-if="obj.timeType == 3">{{ time }}</div>
        </div>
        <div v-else>{{ dateTime }}<span v-if="obj.timeType == 3">{{ time }}</span></div>
        <div class="gotoViewBtn" v-if="isGotoView" @click="gotoUrl(obj)"></div>
    </div>
</template>

<script>
import moment from "moment"

export default {
    Name: "Time",
    props: {
        obj: Object,
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: Function,
    },
    data() {
        return {
            carStyle: {},
            dateTime: '',
            time: '',
        }
    },
    mounted() {
        this.setStyle();
        var self = this;
        setInterval(function () {
            if (self.obj.timeType == 1) {
                self.dateTime = moment().format("YYYY年MM月DD日");
            } else if (self.obj.timeType == 2) {
                self.dateTime = moment().format("HH:mm:ss");
            } else if (self.obj.timeType == 3) {
                self.dateTime = moment().format("YYYY年MM月DD日");
                self.time = moment().format("HH:mm:ss");
            }
        }, 1000);
    },
    computed: {
        isGotoView() {
            if (this.isEdit == false && this.obj.contactType > 0) {
                if (this.obj.contactType == 1 && this.obj.boardId) {
                    return true;
                }
                if (this.obj.contactType == 2 && this.obj.url) {
                    return true;
                }
            }
            return false;
        }
    },
    methods: {
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }
            var boxShadow = "";

            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
                fontFamily: style.fontFamily,
                letterSpacing: style.letterSpacing + "px",
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion
        }
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                // console.log(newVal, oldVal)
                this.setStyle();
            }
        }
    },
}
</script>